<!-- src/views/AttractInvestment/channel/add.vue -->
<template>
  <el-dialog
    title="新建渠道"
    :visible="visible"
    @close="handleClose"
    width="600px"
    
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      size="small"
    >
      <!-- 渠道提报人员 -->
      <el-form-item label="渠道提报人员">
        <el-input v-model="formData.reporter" disabled />
      </el-form-item>

      <!-- 渠道级别 -->
      <el-form-item label="渠道级别" prop="level">
        <el-select v-model="formData.level" placeholder="请选择">
          <el-option label="一级渠道" value="1" />
          <el-option label="二级渠道" value="2" />
          <el-option label="三级渠道" value="3" />
        </el-select>
      </el-form-item>

      <!-- 渠道归属部门 -->
      <el-form-item label="渠道归属部门">
        <el-select v-model="formData.department" placeholder="请选择">
          <el-option label="内部服务中心" value="internal" />
          <!-- 可扩展更多部门 -->
        </el-select>
      </el-form-item>

      <!-- 渠道分类 -->
      <el-form-item label="渠道分类" prop="category">
        <el-select v-model="formData.category" placeholder="请选择">
          <el-option label="政府机构" value="government" />
          <el-option label="行业协会" value="association" />
          <el-option label="企业中介" value="agency" />
        </el-select>
      </el-form-item>

      <!-- 是否签约 -->
      <el-form-item label="是否签约" prop="isSigned">
        <el-select v-model="formData.isSigned" placeholder="请选择">
          <el-option label="是" value="true" />
          <el-option label="否" value="false" />
        </el-select>
      </el-form-item>

      <!-- 渠道名称 -->
      <el-form-item label="渠道名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入渠道名称" />
      </el-form-item>

      <!-- 渠道维护人员 -->
      <el-form-item label="渠道维护人员">
        <el-input v-model="formData.maintainer" disabled />
      </el-form-item>

      <!-- 渠道联系人 -->
      <el-form-item label="渠道联系人" prop="contactPerson">
        <el-input v-model="formData.contactPerson" placeholder="请输入联系人姓名" />
      </el-form-item>

      <!-- 手机号码 -->
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机号码" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';

const emit = defineEmits(['success', 'close']);

// 控制弹窗显示隐藏
const visible = ref(false);
const formRef = ref(null);

// 表单数据
const formData = reactive({
  reporter: '荣原',
  level: '',
  department: 'internal',
  category: '',
  isSigned: 'false',
  name: '',
  maintainer: '荣原',
  contactPerson: '',
  mobile: ''
});

// 验证规则
const rules = {
  level: [{ required: true, message: '请选择渠道级别', trigger: 'change' }],
  category: [{ required: true, message: '请选择渠道分类', trigger: 'change' }],
  isSigned: [{ required: true, message: '请选择是否签约', trigger: 'change' }],
  name: [
    { required: true, message: '请输入渠道名称', trigger: 'blur' },
    { min: 1, max: 20, message: '渠道名称长度不能超过20个字符', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入汉字和英文', trigger: 'blur' }
  ],
  contactPerson: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
    { min: 1, max: 10, message: '联系人姓名长度不能超过10个字符', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入汉字和英文', trigger: 'blur' }
  ],
  mobile: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
};

// 打开弹窗
const open = () => {
  visible.value = true;
};

// 关闭弹窗
const handleClose = () => {
  visible.value = false;
  emit('close');
};

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 发送请求或触发父组件事件
      emit('success', formData);
      handleClose();
    }
  });
};

// 暴露方法给父组件调用
defineExpose({
  open,
  close: handleClose
});
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>